<template>
  <div
    id="pptCanvas"
    style="
      width: 100%;
      height: 100%;
      background: black;
      object-fit: 100% 100%;
      display: flex;
      align-items: center;
    "
  >
    <div id="placeholder" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  props: {
    url: String,
    pptKey: String,
    hostname: String,
  },
  data() {
    return {
      docEditor: null,
    };
  },
  mounted() {
    console.log("子组件内部");
    console.log(this.url,this.pptKey,this.hostname);
    this.loadONLYOFFICEApi();
  },
  beforeUnmount() {
    this.destroyPPT();
  },
  methods: {
    loadONLYOFFICEApi() {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "http://" + this.hostname + ":9091/web-apps/apps/api/documents/api.js";
      const that = this;
      // 可选：添加加载成功/失败的回调
      script.onload = () => {
        console.log("ONLYOFFICE API脚本加载成功");
        that.initPPT();
      };
      script.onerror = () => console.error("脚本加载失败");

      document.head.appendChild(script);
    },
    initPPT() {
      this.url = "https://center-control-1320487003.cos.ap-guangzhou.myqcloud.com/loop.pptx"
      this.key = "1234457"
      this.docEditor = new DocsAPI.DocEditor("placeholder", {
        events: {
          onSlideEnd: function () {
            console.log("ppt is over");
          },
          onAppReady() {},
        },
        document: {
          fileType: "pptx",
          //每次打开需要生成不同的key
          key: this.pptKey,
          title: "test.pptx",
          //地址必须文件服务器能访问到
          url: this.url,
        },
        editorConfig: {
          //回调地址，当点击保存时触发，wjbh为数据库的文件标识，可以在回调方法中做业务处理，回调程序的服务器必须能访问到文件服务器
          callbackUrl:
            "http://" +
            this.hostname +
            ":8093/system/api/callbackSave?wjbh=" +
            this.pptKey,
          lang: "zh-CN", // 中文
          //"mode": "view",//查看模式
          mode: "view", //编辑模式
          customization: {
            //定制部分允许自定义编辑器界面，使其看起来像您的其他产品，并更改是否存在其他按钮，链接，更改徽标和编辑者所有者详细信息。
            autoplay: true, // 启用自动播放
            loop: true, // 启用循环播放
            macros: true, //定义是否将运行文档宏以及可用的宏设置。默认值为true。
            macrosMode: "warn", //定义是否将运行文档宏。可以采用以下值： disable -根本不运行；enable -自动运行所有宏；warn -警告宏并请求允许运行。默认值为original。
            plugins: true, //定义是否将启动插件并可用。默认值为true。
          },
        },
        user: {
          //用户信息
          id: "111111", //用户ID
          name: "Admin", //用户全名称
        },
        // "documentType": "cell",//表格
        //"documentType": "word",//文档
        documentType: "slide", //ppt演示
        type: "embedded",

        frameEditorId: "iframeEditor",
      });
    },
    destroyPPT() {
      if (this.docEditor == null) {
        return;
      }
      this.docEditor.destroyEditor();

      this.docEditor = null;
      const placeholder = document.getElementById("placeholder");
      if (placeholder) {
        const iframes = placeholder.querySelectorAll("iframe");
        iframes.forEach((iframe) => iframe.remove());
        placeholder.innerHTML = "";
        placeholder.remove();
      }

      // 3. 释放全局引用
      window.DocsAPI = null;
      this.docEditor = null;
    },
  },
};
</script>